<template>
	<view>
		<u-navbar :customBack="customBack" :border-bottom="false" title="邀请好友" :background="background"></u-navbar>
		<image src="../static/invitation_bg1.png" mode="widthFix" class="top" style="height:1000rpx"></image>
		<image src="../static/invitation_tb11.png" @click="seeImage(img_pre+info.notice_icon)" class="img"></image>
		<view class="copy">
			<view class="title">
				我的邀请码
			</view>
			<view class="name">
				{{share_num}}
			</view>
			<view class="button" @click="copyText">
				复制
			</view>
			<view class="text">
				每分享一位好友立赚50
			</view>
		</view>
		<view class="content">
			<view class="title">
				马上分享
			</view>
			<view class="up">
				<view class="u1" @click="toPage('poster?img='+info.wx_invite_icon)">
					<image src="../static/invitation_tb1.png" class="image"></image>
					<view class="name">
						微信邀请
					</view>
				</view>
				<view class="u2" @click="toPage('extension')">
					<image src="../static/invitation_tb2.png" class="image"></image>
					<view class="name">
						面对面邀请
					</view>
				</view>
				<view class="u3" @click="toPage('download?img='+info.download_icon)">
					<image src="../static/invitation_tb3.png" class="image"></image>
					<view class="name">
						软件下载
					</view>
				</view>
				<view class="u4" @click="toPage('day')">
					<image src="../static/invitation_tb4.png" class="image"></image>
					<view class="name">
						每日分享
					</view>
				</view>
				<image src="../static/invitation_tb5.png" class="u5"></image>
			</view>
			<view class="title">
				我的累计奖励
			</view>
			<view class="down">
				<image src="../static/invitation_tb6.png" class="icon"></image>
				<view class="number">
					{{info.reward_total}}
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" background="transparent">
			<view class="share">
				<view class="title">
					每分享一位好友立赚
				</view>
				<view class="number">
					50
				</view>
				<view class="button">
					<u-button type="primary" class="b1" @click="toBack">暂时离开</u-button>
					<u-button type="primary" class="b2" @click="show=false">立即邀请</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#F9E487'
				},
				share_num: "",
				number: 0,
				show: false,
				info: {}
			}
		},
		onLoad(option) {
			than = this;
			than.post("api/center/qrOfinvite", null, function(data) {
				than.share_num = data.invite_code
			})
			than.post("api/share/shareManage ", null, function(data) {
				than.info = data;
			})
		},

		methods: {
			copyText() {
				uni.setClipboardData({
					data: than.share_num,
					success: function(res) {
						than.toast("复制成功")
					}
				});
			},
			customBack() {
				than.show = true
			},
			toBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		position: absolute;
		top: 0;
	}

	.img {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		top: 183rpx;
		right: 45rpx;
	}

	.share {
		background-image: url(../static/invitation_tb7.png);
		background-size: 100% 100%;
		width: 584rpx;
		height: 569rpx;

		.title {
			height: 140rpx;
			line-height: 140rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: bold;
			color: #F42E23;
		}

		.number {
			line-height: 1;
			font-size: 180rpx;
			font-family: DIN Medium;
			font-weight: 400;
			color: #FACE78;
			background: linear-gradient(0deg, #F7CB99 0%, #F60F0B 26.904296875%, #F86F51 78.0029296875%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-align: center;
		}

		.button {
			margin-top: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 50rpx;

			.b1 {
				width: 203rpx;
				height: 74rpx;
				border: 1rpx solid #F5B845;
				background: #FF4249;
				border-radius: 37rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F5B845;
			}

			.b2 {
				width: 203rpx;
				height: 74rpx;
				background: linear-gradient(-90deg, #F7EBAE, #FBCF4D, #FFEC8F);
				border-radius: 37rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #B80F1E;
			}
		}

	}

	.content {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: 750rpx;
		position: relative;
		z-index: 10;
		padding: 150rpx 36rpx 21rpx;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.up {
			margin: 24rpx 0 64rpx;
			height: 369rpx;
			background: #FAFAFA;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.image {
				width: 86rpx;
				height: 86rpx;
			}

			.name {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.u1 {
				position: absolute;
				top: 24rpx;
				left: 101rpx;
				width: 120rpx;
				text-align: center;
			}

			.u2 {
				width: 120rpx;
				text-align: center;
				top: 24rpx;
				right: 101rpx;
				position: absolute;
			}

			.u3 {
				width: 120rpx;
				text-align: center;
				top: 212rpx;
				left: 101rpx;
				position: absolute;
			}

			.u4 {
				width: 120rpx;
				text-align: center;
				top: 212rpx;
				right: 101rpx;
				position: absolute;
			}

			.u5 {
				width: 159rpx;
				height: 159rpx;
			}

		}

		.down {
			margin-top: 24rpx;
			height: 250rpx;
			background: #FAFAFA;
			border-radius: 12rpx;

			.icon {
				margin-top: 37rpx;
				width: 170rpx;
				height: 54rpx;
			}

			.number {
				margin-left: 28rpx;
				font-size: 100rpx;
				font-family: DINCond-Black;
				font-weight: bold;
				color: #FF240F;
			}
		}
	}

	.copy {
		width: 560rpx;
		height: 566rpx;
		background-image: url(../static/copy.png);
		background-size: 100% 100%;
		position: absolute;
		margin: 150rpx auto 0;
		left: 0;
		right: 0;
		z-index: 11;
		top: 240rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6D4B3C;
			height: 155rpx;
			line-height: 155rpx;
		}

		.name {
			text-align: center;
			font-size: 64rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ED3827;
		}

		.button {
			width: 180rpx;
			height: 74rpx;
			background: linear-gradient(-90deg, #F9D65B, #FFC114, #FFBA00);
			box-shadow: 0px 4rpx 6rpx 0px rgba(255, 186, 1, 0.2);
			border-radius: 37rpx;
			text-align: center;
			line-height: 74rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #B80F1E;
			margin: 100rpx auto 0;
		}

		.text {
			margin-top: 44rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
